<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <link rel="stylesheet" href="bootstrap-5.3.0-dist/css/bootstrap.min.css">
</head>
<body>
  <div class="container">
    <form class="needs-validation text-center" novalidate>
      <div class="input-group my-3">
        <label class="input-group-text" for="username">用户名：</label>
        <input type="text" class="form-control" id="username" required>
        <div class="invalid-feedback text-center">请输入用户名</div>
        <div class="valid-feedback text-center">输入正确</div>
      </div>
      <button type="submit" class="text-white bg-primary border-0 rounded-1 px-5 py-2">注册</button>
    </form>    
  </div>
  <script src="bootstrap-5.3.0-dist/js/bootstrap.min.js"></script>
  <script>
    var form = document.querySelector('.needs-validation');
    form.addEventListener('submit', function (event) {
      if (!form.checkValidity()) {
        event.preventDefault();
        event.stopPropagation();
      }
      form.classList.add('was-validated');
    });
   </script>  
</body>
</html>